{% extends "user_base.html" %}
{% block title %}
疾病知识问答
{% endblock %}

{% block subtitle %}
疾病知识问答
{% endblock %}


{% block main %}疾病知识问答{% endblock %}

{% block header %}
<style>
    .msgshow {
        height: 450px;
        border-bottom: 1px solid rgb(136, 133, 133);
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: auto;
        /* background-color: aqua; */
    }
    .input-box {
        height: 150px;
        padding: 20px;
        box-sizing: border-box;
        /* background-color: red; */

    }
    .answer {
        align-self: flex-start;
        border-radius: 5px;
        background-color: rgb(221, 235, 219);
        padding: 8px;
    }

    .user {
        border-radius: 5px;
        background-color: rgb(97, 230, 80);
        padding: 8px;
        align-self: flex-end;
    }
    .but{
        height: 65px;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        align-items: center;
    }
    button {
        border: none;
        background-color: rgb(25, 225, 65);
        width: 70px;
        height: 30px;
        border-radius: 6px;
    }
</style>
<script>
    function sendmsg() {
        var msg = $(".input-box").text();
        var msg_dom = $('<p class="user">' + msg + '</p>')
        $(".msgshow").append(msg_dom)
        $('.input-box').text('');
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        $.ajax({
            url:"{% url 'UserApp:answer'%}",
            // async:false,//异步请求
            type:"post",
            data: { "msg": msg, 'csrfmiddlewaretoken': csrf },
            dataType: "json",  // 返回的数据格式
        }).success(function(data){
            answer_dom = $('<p class="answer">' + data.answer + '</p>')
            $(".msgshow").append(answer_dom)

        })

    }
</script>
{% endblock %}

{% block content %}
<section class="section">
    <div class="row">
        <div class="col-lg-12">


            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">疾病知识问答系统</h5>

                    <!-- 消息框 -->
                    {% csrf_token %}
                    <div class="msgshow">
                        <p class="answer">欢迎使用本系统，我有什么可以帮到你的嘛？</p>

                    </div>


                </div>
                <!-- 输入框 -->
                <div class="input-box" contenteditable></div>
                <div class="but">
                    <button onclick="sendmsg()">发送</button>
                </div>

            </div>

        </div>
    </div>
    </div>
</section>


{% endblock %}